<!-- 会员导入 -->
<template>
  <div>
    <a-modal :maskClosable="false" centered :width="600" v-model="visible" :footer="null">
      <template slot="title">
        <div class="disFlxJS _mr-50">
          <div>{{title}}<span class="fz-10 _pl-10" style="color:#666;">(可把文件拖入指定区域,完成上传)</span></div>
          <a-button class="fz-12" size="small" type="primary" @click="dwExportemplate(applyType)">下载导入模板</a-button>
        </div>
      </template>
      <a-spin :spinning="(loading || dwDisabled)">
        <div class="hoverBox">
          <UploadFile @upload="(data) => upload(data, applyType)">
            <div style="width: 550px;height: 170px;" class="disFlxCC">
              <a-icon type="upload" class="fz-30 text" />
              <div class="fw-6 _pt-10 fz-15 text">上传导入文件</div>
              <div class="fz-12 _pt-10 text">导入需先下载导入模板,且按模板中说明及要求进行规范填写</div>
              <div class="fz-12 _pt-5 text">上传按模板规范填写后的文件,系统会自动进行批量{{title}}</div>
            </div>
          </UploadFile>
        </div>
      </a-spin>
    </a-modal>

    <TaskNotification ref="TaskNotification" />
  </div>
</template>

<script>
import { customExportemplate, customImportExcel } from '@/api/member/member'
import UploadFile from '@/components/UploadFile/excel.vue'
import TaskNotification from '@/components/tools/TaskNotification'

export default {
  props: {
    title: {
      type: String,
      default: '会员导入'
    },
    applyType: {
      type: Number
    },
  },
  components: {
    UploadFile,
    TaskNotification
  },
  data() {
    return {
      visible: false,
      loading: false,
    }
  },
  computed: {
    // 按钮是否禁用-判断当前页面是否存在未完成任务
    dwDisabled() {
      const _currentDW = this.$store.state.app.taskQueuesList.find(v=> v.fullPath === this.$route.fullPath); 
      return !!_currentDW
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    async dwExportemplate(fromid) {
      await customExportemplate({ fromid })
    },
    // 导入模板
    async upload(form, type) {
      this.loading = true;
      form.append('fromid', type);
      form.append('fullPath', this.$route.fullPath);
      customImportExcel(form).then(res=>{
        this.visible = false;
        const { data } = res;
        this.$refs.TaskNotification.toggleTask(data);
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      })
    },
  },
}
</script>
<style scoped lang="less">
.hoverBox {
  &:hover {
    color: #1890ff;
    border-color: #1890ff;
    .text{
      color: #1890ff;
    }
  }
}
</style>